import React, { useEffect, useState } from "react";
import { Tabs, Image } from "antd-mobile";
import RateIcon from "assets/common_tab_circle_s.png";
import SearchIcon from "assets/common_icon_search_n.png";
import "./index.scss";
import { useNavigate } from "react-router-dom";
import Community_Top from "components/Community_Top";
import { useDispatch, useSelector } from "react-redux";
import {
  // communityList,
  // knowLedgeSelect,
  doGetDepList,
  depListSelect,
} from "store/CommunityPortList";
import Community_bottom from "components/Community_Bottom";
import ContentPage from "./Content_Page";

const index = () => {
  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState<string>();
  const dispatch = useDispatch<any>();
  const depList = useSelector(depListSelect);
  useEffect(() => {
    dispatch(doGetDepList()).then((res: any) => {
      if (res.payload.result) {
        setActiveKey(res.payload.result[0].id + "");
      }
    });
  }, []);
  const handleChange = (key: string) => {
    setActiveKey(key);
  };
  // 点击评论跳转
  const hangleRate = () => {
    navigate("/rate");
  };
  // 搜索跳转
  const gotoSearch = () => {
    navigate(`/search`);
  };
  return (
    <div>
      {/* 头部组件 */}
      <Community_Top />
      <main>
        <div className="tab">
          <Image src={SearchIcon} className="seach" onClick={gotoSearch} />

          {depList.length ? (
            <Tabs activeKey={activeKey} onChange={handleChange}>
              {depList.map((item: any) => {
                return (
                  <Tabs.Tab
                    key={item.id + ""}
                    title={item.departmentName}
                    destroyOnClose={true}
                  >
                    <ContentPage id={item.id} />
                  </Tabs.Tab>
                );
              })}
            </Tabs>
          ) : null}
        </div>
      </main>
      {/* 写病友圈icon */}
      <Image
        onClick={hangleRate}
        src={RateIcon}
        width={64}
        height={64}
        fit="cover"
        className="rate"
      />
      {/* 底部组件 */}
      <Community_bottom />
    </div>
  );
};
export default index;
